<template>
  <a-layout :style="{height:'100vh'}">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" :items="menuList" @click="jumpPage"></a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
      </a-layout-header>
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }" >
        
        <div class="nav-link">
          <a-breadcrumb>
            <a-breadcrumb-item v-for="name in breadMenu">{{ name }}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        
        <RouterView></RouterView>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
// h - > React.createElement('div',属性)
import { ref ,onMounted,h, watchEffect} from 'vue';
import {useUserInfo} from '@/stores/userinfo'
import {
  UserOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';
// import * as antIcons from '@ant-design/icons-vue';
import type {  ItemType } from 'ant-design-vue';
import type {IMenuProps} from '@/interface/common'
import {useRoute, useRouter} from 'vue-router'

import {getRouterMenu,getCurPathObj} from '@/utils/util'
//路由信息
const $route = useRoute();

// 路由的相关方法api
const $router = useRouter();

const selectedKeys = ref<string[]>([$route.path]);
const collapsed = ref<boolean>(false);

const breadMenu = ref<string[]>([])

const userModal = useUserInfo();
const menuList = ref<ItemType[]>([{
  label:'aaa',
  key:'aaa',
  icon: () => h(UserOutlined),
  children:[{
    label:'bbb',
    key:'bbbb',
    icon:()=> h(UserOutlined)
  }]

}])

const jumpPage = ({key}:any)=>{
  $router.push(key);

}
// 转化menu的数据格式
const formatMenu = (menuArr:IMenuProps[]):ItemType[]=>{
  let menuAll = menuArr.map((item)=>{
    item.icon = 'UserOutlined';
    return {
      label:item.name,
      key:item.path,    // path是唯一的，可以key
      // icon:() => h((antIcons as any)[item.icon as string]),   // 动态使用图标
      icon:()=> h(UserOutlined),
      children: item.children && formatMenu(item.children)
    }
  })
  return menuAll;
}

// 处理面包屑格式
const formatBread = ()=>{
   let breadcrumb =   getRouterMenu($route.path,userModal.menus);
   let currentObj =  getCurPathObj($route.path,userModal.menus);
   breadMenu.value = [...breadcrumb, currentObj.name];
}
// 监听路由path的改变
watchEffect(()=>{
  console.log('初始化');
   // 调用面包屑函数
  formatBread();
})

onMounted(()=>{
  if(userModal.menus) {
    let datas = userModal.menus as IMenuProps[]
    let menudata = datas[0].children;
    if(menudata) {
      let menuall = formatMenu(menudata);
      menuList.value = menuall;
    }
  }
  
})
</script>

<style>
.nav-link {
  margin-bottom: 15px;
}
</style>
